MONON98's Blog

Appearance

面试难题汇总 ​

1. 前端如何分析内存泄漏？ ​

Details

内存泄漏是指程序在运行过程中，不再使用的内存没有被释放，导致可用内存逐渐减少，最终可能导致应用程序崩溃或性能下降。在前端开发中，分析和修复内存泄漏是一个重要的任务。以下是一些常用的方法和工具，用于检测和分析前端的内存泄漏。

1. 使用浏览器的开发者工具 ​

大多数现代浏览器都提供了强大的开发者工具，可以帮助你检测内存泄漏。

Chrome 浏览器 ​

  1. 打开开发者工具：

    • 右键点击页面，选择“检查”或按 F12。

  2. 切换到“Memory”面板：

    • 在开发者工具中，找到并点击“Memory”标签。

  3. 创建快照：

    • 点击“Take snapshot”按钮，生成当前内存使用情况的快照。
    • 进行一些操作后，再次创建快照。

  4. 比较快照：

    • 通过比较两个快照，查看哪些对象的数量增加了，可能是内存泄漏的迹象。
    • 你可以查看对象的引用关系，找出未被释放的对象。

  5. 使用“记录分配”：

    • 在“Memory”面板中，选择“Record Allocation Timeline”选项，记录一段时间内的内存分配情况。
    • 进行一些操作后停止记录，查看内存使用情况的变化。

Firefox 浏览器 ​

Firefox 的操作与 Chrome 类似，使用“内存”面板进行快照和比较。

2. 监控性能 ​

通过监控应用程序的性能，可以间接发现内存泄漏。你可以使用 performance.memory API（仅在 Chrome 中可用）来查看 JavaScript 堆的使用情况。

javascript
if (performance.memory) {
    console.log(`JS Heap Size Limit: ${performance.memory.jsHeapSizeLimit}`);
    console.log(`Total JS Heap Size: ${performance.memory.totalJSHeapSize}`);
    console.log(`Used JS Heap Size: ${performance.memory.usedJSHeapSize}`);
}

3. 代码审查 ​

  • 事件监听器：确保在不再需要时移除事件监听器，尤其是在组件销毁时。
  • 定时器和异步操作：确保在组件卸载时清除定时器和取消未完成的异步操作。
  • 全局变量：避免使用全局变量，确保变量的作用域正确。
  • 闭包：注意闭包可能导致的内存泄漏，确保不再使用的变量被释放。

4. 使用第三方工具 ​

  • Memory Profiler：一些第三方工具可以帮助你分析内存使用情况，例如：
    • Heap.js：用于分析 JavaScript 堆的工具。
    • Leak Finder：用于检测 JavaScript 中的内存泄漏。

5. 实际案例分析 ​

  • 重复创建 DOM 元素：如果在每次操作中重复创建 DOM 元素而不释放，可能导致内存泄漏。
  • 未清理的引用：在 JavaScript 中，某些对象的引用未被清理，导致垃圾回收无法回收这些对象。

6. 总结 ​

内存泄漏是前端开发中的常见问题，通过使用浏览器的开发者工具、监控性能、代码审查和第三方工具，你可以有效地检测和分析内存泄漏。及时发现并修复内存泄漏，可以提高应用程序的性能和稳定性。

2. 什么是闭包？闭包的优缺点是什么？ ​

Details

闭包（Closure）是 JavaScript 中一个重要的概念，它指的是一个函数与其外部作用域（lexical scope）中的变量的绑定关系。简单来说，闭包允许一个函数访问并操作其外部函数的变量，即使外部函数已经执行完毕。

闭包的工作原理 ​

当一个函数被定义在另一个函数内部时，内部函数就形成了一个闭包。这个闭包可以访问外部函数的变量，即使外部函数已经返回。闭包的形成使得内部函数可以“记住”外部函数的状态。

闭包的示例 ​

javascript
function outerFunction() {
    let outerVariable = 'I am from outer function';

    function innerFunction() {
        console.log(outerVariable); // 访问外部函数的变量
    }

    return innerFunction; // 返回内部函数
}

const closureFunction = outerFunction(); // 执行外部函数，返回内部函数
closureFunction(); // 输出: I am from outer function

闭包的优点 ​

  1. 数据封装：闭包可以创建私有变量，外部无法直接访问这些变量，只能通过特定的函数进行操作。这有助于实现数据的封装和保护。

    javascript
    function createCounter() {
    let count = 0; // 私有变量

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 输出: 1

  2. 保持状态：闭包可以保持外部函数的状态，允许你在后续的调用中继续使用这些状态。

  3. 函数工厂：通过闭包，可以创建具有特定行为的函数，例如函数工厂，根据不同的参数生成不同的函数。

    javascript
    function makeMultiplier(multiplier) {
    return function(x) {
        return x * multiplier;
    };
}

const double = makeMultiplier(2);
console.log(double(5)); // 输出: 10

闭包的缺点 ​

  1. 内存消耗：闭包会保持对外部变量的引用，这可能导致内存泄漏，特别是在不再需要闭包时。如果闭包引用了大量数据，可能会导致内存占用增加。

  2. 性能问题：过多的闭包可能会影响性能，尤其是在频繁创建和销毁的情况下。每个闭包都需要维护其外部作用域的状态，这可能会增加内存和处理开销。

  3. 调试复杂性：由于闭包的作用域链，调试时可能会变得复杂，尤其是在嵌套函数较多的情况下，追踪变量的来源和状态可能会比较困难。

总结 ​

闭包是 JavaScript 中一个强大且灵活的特性，它允许函数访问其外部作用域的变量，并能保持这些变量的状态。通过合理使用闭包，可以实现数据封装、函数工厂等多种编程模式。然而，开发者在使用闭包时也需要注意内存管理和性能问题，以避免潜在的缺陷。理解闭包的工作原理对于深入掌握 JavaScript 至关重要。

11. route中的history和hash的区别是什么？各自的优点和缺点是什么？ ​

Details

在 Vue.js 中，路由中的 history 模式和 hash 模式是两种常见的路由模式，它们有一些区别和各自的优缺点。

  1. 区别：

    • hash 模式：在 URL 中会出现 # 符号，路由信息会保存在 URL 的哈希部分，例如 http://www.example.com/#/about。
    • history 模式：利用 HTML5 的 History API，在 URL 中不会有 # 符号，路由信息会直接显示在路径中，例如 http://www.example.com/about。

  2. 优点和缺点：

    • hash 模式：
      • 优点：
        • 兼容性好，支持所有浏览器。
        • 部署简单，不需要服务器端额外配置。
      • 缺点：
        • URL 中会有 # 符号，影响美观性。
        • 不利于 SEO（搜索引擎优化），搜索引擎对于 # 后面的内容不会进行解析。
    • history 模式：
      • 优点：
        • URL 更美观，不会有 # 符号。
        • 更符合 RESTful 风格，路径更加直观。
      • 缺点：
        • 兼容性较差，需要服务器端的额外配置支持。
        • 刷新页面时会出现 404 错误，需要配置后端服务器以支持单页应用的路由。

综上所述，如果你的应用需要在老旧浏览器中运行或者不需要考虑 SEO 问题，可以选择 hash 模式；如果你追求更好的用户体验和更好的 URL 显示，可以选择 history 模式，但需要注意处理刷新页面时出现的问题。

21. loader 和 plugin 在 webpack 中的区别 ​

Details

在 webpack 中，loader 用于处理各种类型的文件，比如 JavaScript、CSS、图片等。loader 可以将这些文件转换为模块，以便 webpack 可以正确地加载它们。loader 可以处理文件的转换、压缩、编译等任务，使得我们可以在项目中引入各种类型的文件，并且在构建过程中进行相应的处理。

在 webpack 中，plugin 用于执行更广泛的任务，比如打包优化、资源管理、环境变量注入等。plugin 可以监听 webpack 构建过程中的事件，并在适当的时机执行自定义的逻辑。通过使用 plugin，我们可以扩展 webpack 的功能，实现更多复杂的需求，比如代码分割、提取公共代码、压缩代码等。

总的来说，loader 主要用于处理文件的转换和加载，而 plugin 则用于执行更广泛的任务，对 webpack 的构建过程进行干预和定制化。在实际项目中，我们通常会同时使用 loader 和 plugin，来实现对项目资源的处理和优化。